<template>
  <div class="register-container">
    <el-card class="register-card">
      <h1 class="title">宿舍管理系统 - 注册</h1>
      <p class="subtitle">请选择角色并填写注册信息</p>
      
      <!-- 角色选择 -->
      <el-radio-group v-model="selectedRole" class="role-radio-group">
        <el-radio label="student">学生</el-radio>
        <el-radio label="admin">宿管</el-radio>
        <el-radio label="classLeader">班干部</el-radio>
      </el-radio-group>
      
      <!-- 学生注册表单 -->
      <el-form
        v-if="selectedRole === 'student'"
        :model="studentForm"
        ref="studentFormRef"
        :rules="studentRules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="studentForm.studentId" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="studentForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="studentForm.username" placeholder="请设置用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="studentForm.password"
            placeholder="请设置密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="studentForm.confirmPassword"
            placeholder="请确认密码"
            type="password"
          ></el-input>
        </el-form-item>
           <el-form-item label="楼栋" prop="building">
          <el-input v-model="studentForm.building" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号" prop="dormitoryNumber">
          <el-input v-model="studentForm.dormitoryNumber" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
      </el-form>
      
      <!-- 宿管注册表单 -->
      <el-form
        v-if="selectedRole === 'admin'"
        :model="adminForm"
        ref="adminFormRef"
        :rules="adminRules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="工号" prop="adminId">
          <el-input v-model="adminForm.adminId" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="adminForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="adminForm.username" placeholder="请设置用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="adminForm.password"
            placeholder="请设置密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="adminForm.confirmPassword"
            placeholder="请确认密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责宿舍楼" prop="building">
          <el-input v-model="adminForm.building" placeholder="请输入负责宿舍楼"></el-input>
        </el-form-item>
      </el-form>
      
      <!-- 班干部注册表单 -->
      <el-form
        v-if="selectedRole === 'classLeader'"
        :model="classLeaderForm"
        ref="classLeaderFormRef"
        :rules="classLeaderRules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="classLeaderForm.studentId" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="classLeaderForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="classLeaderForm.username" placeholder="请设置用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="classLeaderForm.password"
            placeholder="请设置密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="classLeaderForm.confirmPassword"
            placeholder="请确认密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-input v-model="classLeaderForm.className" placeholder="请输入班级"></el-input>
        </el-form-item>
        <el-form-item label="担任职务" prop="role">
          <el-input v-model="classLeaderForm.role" placeholder="请输入职务名"></el-input>
        </el-form-item>
      </el-form>
      
      <!-- 操作按钮 -->
      <div class="button-group">
        <el-button type="primary" @click="handleRegister" :loading="loading">
          {{ loading ? '注册中...' : '立即注册' }}
        </el-button>
        <el-button @click="goToLogin">返回登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { register } from '../../api/auth'; // 假设注册API

const router = useRouter();
const selectedRole = ref('student'); // 默认选择学生角色
const loading = ref(false);

// 定义表单引用
const studentFormRef = ref(null);
const adminFormRef = ref(null);
const classLeaderFormRef = ref(null);

// 学生注册表单数据
const studentForm = reactive({
  studentId: '',
  name: '',
  username: '',
  password: '',
  confirmPassword: '',
  dormitoryNumber: '',
  building: ''
});

// 宿管注册表单数据
const adminForm = reactive({
  adminId: '',
  name: '',
  username: '',
  password: '',
  confirmPassword: '',
  building: ''
});

// 班干部注册表单数据
const classLeaderForm = reactive({
  studentId: '',
  name: '',
  username: '',
  password: '',
  confirmPassword: '',
  className: '',
  role:''
});

// 学生表单验证规则
const studentRules = {
  studentId: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { pattern: /^\d{8,12}$/, message: '学号格式不正确', trigger: 'blur' }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  username: [
    { required: true, message: '请设置用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== studentForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ],
  dormitoryNumber: [{ required: true, message: '请输入宿舍号', trigger: 'blur' }]
};

// 宿管表单验证规则
const adminRules = {
  adminId: [
    { required: true, message: '请输入工号', trigger: 'blur' },
    { pattern: /^\d{6,10}$/, message: '工号格式不正确', trigger: 'blur' }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  username: [
    { required: true, message: '请设置用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== adminForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ],
  building: [{ required: true, message: '请输入负责宿舍楼', trigger: 'blur' }]
};

// 班干部表单验证规则
const classLeaderRules = {
  studentId: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { pattern: /^\d{8,12}$/, message: '学号格式不正确', trigger: 'blur' }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  username: [
    { required: true, message: '请设置用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== classLeaderForm.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ],
  className: [{ required: true, message: '请输入班级', trigger: 'blur' }]
};

// 注册处理函数
const handleRegister = async () => {
  // 表单验证
  let formRef;
  let formData;
  
  if (selectedRole.value === 'student') {
    formRef = studentFormRef.value;
    formData = {
      ...studentForm,
      role: 'student',
      confirmPassword: '' // 不传递确认密码
    };
  } else if (selectedRole.value === 'admin') {
    formRef = adminFormRef.value;
    formData = {
      ...adminForm,
      role: 'admin',
      confirmPassword: ''
    };
  } else if (selectedRole.value === 'classLeader') {
    formRef = classLeaderFormRef.value;
    formData = {
      ...classLeaderForm,
      role: 'classLeader',
      confirmPassword: ''
    };
  }
  
  if (!formRef) return;
  
  formRef.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        // 调用注册API
        const response = await register(formData);
        
        if (response.code === 0) {
          ElMessage.success('注册成功，请登录');
          // 注册成功后跳转到登录页面
          router.push('/login');
        } else {
          ElMessage.error(response.message || '注册失败');
        }
      } catch (error) {
        ElMessage.error(error.message || '注册失败，请稍后再试');
      } finally {
        loading.value = false;
      }
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};

// 返回登录页面
const goToLogin = () => {
  router.push('/login');
};





</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}
.register-card {
  width: 400px;
  padding: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 5px;
}
.title {
  text-align: center;
  margin-bottom: 20px;
}
.subtitle {
  text-align: center;
  color: #606266;
  margin: 0 0 25px 0;
}
.role-radio-group {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.form-container {
  margin-top: 10px;
}
.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
@media (max-width: 450px) {
  .register-card {
    width: 90%;
    padding: 20px;
  }
  .button-group {
    flex-direction: column;
  }
  .button-group .el-button {
    margin-bottom: 10px;
  }
}
</style>